<template>
  <div class="card-container">
    <el-badge :value="getTotalCount" :max="20" class="item">
      <el-button icon="el-icon-goods" round type="primary" @click="showDetails=!showDetails">我的购物车</el-button>
    </el-badge>
    <transition name="el-zoom-in-bottom">
      <div class="cart-details" v-if="showDetails">
        <div class="card-details-title">购物车详情</div>
        <div v-if="this.$store.state.currentShoppingCart.items.length === 0" class="cart-empty-tips">
          <img src="../../../assets/images/customer/cart_empty.png"/>
        </div>
        <div v-else class="cart-details-item">
          <p class="cart-store-name"><i class="el-icon-caret-right" style="margin-right: 10px;"></i>{{this.$store.state.currentShoppingCart.store['name']}}</p>
          <div class="cart-product-item" v-for="item in this.$store.state.currentShoppingCart.items" :key="item.product['id']">
            <p class="cart-product-name">{{ item.product['name'] }} ￥{{ item.product['price'] }}</p>
            <el-input-number size="mini" v-model="item.count" :min="0" :max="item.product['quantity']" @change="updateCartItem"></el-input-number>
          </div>
        </div>
        <div v-if="this.$store.state.currentShoppingCart.items.length !== 0" class="cart-to-buy">
          <div class="cart-current-total-price">总计 {{ getTotalPrice }} 元</div>
          <el-button type="primary" class="cart-to-buy-btn" @click="showOrder">结 算</el-button>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
class Cart {
  constructor (store) {
    this.store = store
    this.items = []
  }
  removeAllProduct () {
    this.items.splice(0, this.items.length)
  }
  addProduct (product) {
    let item = null
    this.items.forEach((currentItem) => {
      if (currentItem.product['id'] === product['id']) {
        item = currentItem
      }
    })
    if (item === null) {
      this.items.push(new CartItem(product))
    } else {
      item.count = item.count + 1
    }
  }
}
class CartItem {
  constructor (product) {
    this.product = product
    this.count = 1
  }
}
export default {
  name: 'ShoppingCart',
  data () {
    return {
      showDetails: false,
      shoppingCartItem: null
    }
  },
  methods: {
    updateCartItem (val) {
      if (val === 0) {
        let removeItem = null
        this.$store.state.currentShoppingCart.items.forEach((item) => {
          if (item.count === 0) {
            removeItem = item
          }
        })
        if (removeItem !== null) {
          this.$store.state.currentShoppingCart.items.splice(this.$store.state.currentShoppingCart.items.indexOf(removeItem), 1)
        }
      }
    },
    showOrder () {
      if (this.$store.state.currentUser.username) {
        this.$router.push('/customer/order')
      } else {
        this.$router.push('/customer/login/order')
      }
    }
  },
  computed: {
    getTotalCount () {
      let total = 0
      this.$store.state.currentShoppingCart.items.forEach((item) => {
        total += item.count
      })
      return total
    },
    getTotalPrice () {
      let total = 0
      this.$store.state.currentShoppingCart.items.forEach((item) => {
        total += (item.count * item.product['price'])
      })
      return total
    }
  },
  Cart,
  CartItem
}
</script>

<style scoped>
  .card-container {
    position: fixed;
    right: 70px;
    bottom: 60px;
    z-index: 9999;
  }
  .cart-details {
    position: fixed;
    right: 70px;
    bottom: 120px;
    width: 305px;
    max-height: 400px;
    overflow-y: auto;
    background-color: white;
    z-index: 9999;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.22);
  }
  .card-details-title {
    width: 100%;
    background-color: #409EFF;
    padding: 10px 0;
    color: white;
    letter-spacing: 2px;
    font-size: 16px;
    text-align: center;
  }
  .cart-empty-tips {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cart-product-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    font-size: 13px;
    color: #a2a2a2;
  }
  .cart-store-name {
    margin: 0;
    font-size: 15px;
    color: #515151;
    padding: 8px 20px;
    letter-spacing: 1px;
    background-color: rgba(0,0,0,0.08);
  }
  .cart-details-item {
    padding-bottom: 15px;
  }
  .cart-to-buy {
    height: 40px;
    width: 100%;
    display: flex;
  }
  .cart-current-total-price {
    width: 50%;
    background-color: #dfdfdf;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cart-to-buy-btn {
    width: 50%;
    border-radius: 0 !important;
    font-size: 16px;
  }
</style>
